<template>
  <div>
    <el-container>
      <el-aside width="200px"></el-aside>

      <el-main>
        <!-- 活动的截止日期和标题 -->
        <el-row>
          <el-card :body-style="{ padding: '0px'}" class="custom-card">
            <div class="image-container">
              <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
              <div class="overlay">
                <div class="overlay-content">
                  <div class="title">{{ activity.title }}</div>
                  <div class="tag">CHALLENGE</div>

                </div>
              </div>
            </div>
            <div class="card-footer">
              <div class="time-left">
                <span>{{ activity.end_time }}</span>
                <span>days left</span>
              </div>
              <div class="buttons">
                <el-button type="primary" class="participate-button">PARTICIPATE</el-button>
                <el-button class="view-entries-button">VIEW ENTRIES</el-button>
              </div>
            </div>
          </el-card>
        </el-row>

        <!-- 活动的介绍 -->
        <el-row>
          <el-card class="box-card" :body-style="{ height: cardHeight }">
            <div class="card-content" v-html="activity.description">
            </div>
            <div class="read-more" @click="toggleCardHeight">
              {{ isExpanded ? 'Read Less' : 'Read More' }}
            </div>
          </el-card>
        </el-row>

        <!-- 活动的post -->
        <el-row>
          <el-card class="card-container">
            <el-col v-for="activity in activities" :key="activity.id" :span="8">
              <Card :activity="activity" class="card" />
            </el-col>
          </el-card>

        </el-row>

      </el-main>

      <el-aside width="200px"></el-aside>
    </el-container>
  </div>
</template>

<script>

import Card from "@/components/Card.vue";
import { fetchActivities, fetchGetRequest } from "@/api/api";
import Idea from "@/components/IdeaList.vue";


export default {
  props: {
    id:{required: true},
  },
  data() {
    return {
      currentDate: new Date(),
      isExpanded: false,
      collapsedHeight: '200px',
      expandedHeight: 'auto',
      activities: [],
      activeIndex:'',
      activity:'',
      posts:[]
    };
  },
  computed: {
    cardHeight() {
      return !this.isExpanded ? this.expandedHeight : this.collapsedHeight;
    },

  },
  async mounted() {
    await this.loadData();
  },
  methods: {
    async loadData() {
      await this.fetchActivityById(this.id);
      // await this.fetchActivitiesData();
    },
    toggleCardHeight() {
      this.isExpanded = !this.isExpanded;
    },
    async fetchActivitiesData() {
      console.log('fetchActivitiesData()执行')
      try {
        const res = await fetchGetRequest(`/posts/byActivityId?activity_id=${this.activity.activityId}`);
        console.log(res)
        this.activities = res;
      } catch (err) {
        console.log('根据activity_id获取posts错误', err);
      }
    },
    handleSelect(key) {
      this.$router.push({ path: '/', query: { key: key } });
    },
    async fetchActivityById(id) {
      console.log('获取的id是', id);
      fetchActivities(`/challenges/${id}`)
          .then(data => {
            console.log(`根据id:${id}获取的数据是:`, data);
            data = this.convertChallengeToActivity(data)
            console.log(`转换成activity数据格式以后的数据格式是`, data);
            this.activity = data;
            // this.num = this.activities.length;
          })
          .catch(error => {
            console.error("There was an error fetching the activities!", error);
          });
    },

    convertChallengeToActivity(challenge) {
    return {
        activityId: challenge.challengeId ? Number(challenge.challengeId) : null,
        title: challenge.title || '',
        description: challenge.description || '',
        startTime: challenge.startTime ? new Date(challenge.startTime) : null,
        endTime: challenge.endTime ? new Date(challenge.endTime) : null,
        createdBy: challenge.createdBy ? Number(challenge.createdBy) : null,
        createdAt: challenge.createdAt ? new Date(challenge.createdAt) : null,
        updatedAt: challenge.updatedAt ? new Date(challenge.updatedAt) : null,
        imageUrl: challenge.imageUrl || '',
        videoUrl: '', // Assuming this field is empty, as there’s no equivalent in `Challenge`
        resultNum: challenge.resultNum || 0,
        isDeleted: challenge.isDeleted ? Boolean(challenge.isDeleted) : false
    };
}
  },
  components:{
    Card,
    Idea
  },


}
</script>

#### 样式

```css
<style scoped>

.home, .header, .el-menu {
  margin: 0;
  padding: 0;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}
.spacer {
  height: 60px; /* 这里的高度应与导航栏的高度一致 */
}
.el-menu-demo {
  margin: 0;
}

.custom-card {
  position: relative;
  width: 100%;
  height: 300px; /* 设置整体高度为300px */
  border-radius: 10px;
  overflow: hidden;
}

.image-container {
  position: relative;
  height: 100%; /* 确保图片容器高度适应卡片高度 */
}

.image {
  width: 100%;
  height: 100%; /* 确保图片覆盖容器 */
  object-fit: cover; /* 保持图片比例 */
  display: block;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
}

.overlay-content {
  max-width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.title {
  font-size: 36px;
  font-weight: bold;
  margin-top: 20px;
}

.tag {
  background: red;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  margin-bottom: auto;
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
}

.time-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
}

.buttons {
  display: flex;
  gap: 10px;
}

.participate-button {
  background-color: #f0c040;
  border-color: #f0c040;
}

.view-entries-button {
  border-color: #000;
}

.box-card {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 20px;
  border-radius: 10px;
}

.card-content {
  padding: 20px;
}

.read-more {
  position: relative;
  bottom: 10px;
  right: 20px;
  cursor: pointer;
  color: #409EFF;
}

.card-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 20px;
  border-radius: 10px;
}

.card{
  margin: 10px;
}
</style>
